<template>
    <!-- 在线添加订单 -->
    <el-dialog v-model="onlineTableVisible" :show-close="false" draggable fullscreen @open="loadingOnlineTable" destroy-on-close>
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">在线添加出库 -- <em style="color: red"> * 为必填项</em> -- ESC关闭</h4>
                <div>
                    <el-button type="primary" :icon="TaskComplete" @click="processDataEvent">确认</el-button>
                    <el-button type="danger" @click="close">
                        <el-icon class="el-icon--left">
                            <CircleCloseFilled />
                        </el-icon>
                        关闭
                    </el-button>
                </div>
            </div>
        </template>
        <div class="online-table-container" id="onlineTable"></div>
    </el-dialog>
    <!-- 确认导入订单交付 -->
    <el-dialog v-model="importConfirmVisible" :show-close="false" draggable width="80%" destroy-on-close>
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">确认导入订单 -- ESC关闭</h4>
                <div>
                    <el-button type="danger" @click="close">
                        <el-icon class="el-icon--left">
                            <CircleCloseFilled />
                        </el-icon>
                        关闭
                    </el-button>
                </div>
            </div>
        </template>
        <el-descriptions title="订单交付确认" :column="7" border>
            <template #extra>
                <el-button type="primary" @click="confirmImport">确认</el-button>
            </template>
            <div v-for="(item, index) in orderData" :key="index">
                <el-descriptions-item label="检查">
                    <el-text :type="checkOrderDelivery(item).type">{{ checkOrderDelivery(item).message }}</el-text>
                </el-descriptions-item>
                <el-descriptions-item label="订单号"> {{ item.orderNo }} </el-descriptions-item>
                <el-descriptions-item label="物料号"> {{ item.materialNumber }} </el-descriptions-item>
                <el-descriptions-item label="产品名称"> {{ item.productName }} </el-descriptions-item>
                <el-descriptions-item label="送货数量"> {{ item.deliveryQuantity }} </el-descriptions-item>
                <el-descriptions-item label="单位"> {{ item.unit }} </el-descriptions-item>
                <el-descriptions-item label="单价"> {{ item.price }} </el-descriptions-item>
            </div>
        </el-descriptions>
    </el-dialog>
</template>

<script setup lang="ts">
import { CircleCloseFilled } from '@element-plus/icons-vue';
import { TaskComplete } from '@vicons/carbon';
import './assets/js/x-sheet';
import './assets/css/x-sheet.css';
import { createOutBound } from '@/api/outbound';

/* ******************************父组件需要传递的属性/方法****************************** */
// model 声明
// 订单弹窗
const onlineTableVisible = defineModel('onlineTableVisible', { type: Boolean, default: false, required: true });

// props 声明
// 加工后未交付列表类型
type UnDeliveredList = {
    checked: boolean;
    _id: string;
    orderDate: string;
    orderNo: string;
    productId: string;
    materialNumber: string;
    productName: string;
    orderNumber: number;
    deliveryQuantity: number;
}[];
const props = defineProps<{
    unDeliveredList: UnDeliveredList;
    allDeliveredList: AjaxResponse['orderList'];
    customerId: string;
}>();

/* ******************************通用属性/方法****************************** */
// xSheet
let xSheet: any = {};
// dialog 打开的时候加载xSheet
const loadingOnlineTable = () => {
    // 初始化
    const settings = {
        workConfig: {
            // 工作簿配置
            created: '', // 创建时间
            modified: '', // 修改时间
            creator: '', // 作者信息
            lastModifiedBy: '', // 最后修改作者
            name: '导入模板', // 工作簿名称---导出的名称
            top: {
                // 顶部配置
                option: {
                    // 顶部选项栏配置
                    show: false, // 是否显示选项栏
                },
                menu: {
                    // 顶部菜单栏配置
                    show: false, // 是否显示菜单栏
                },
            },
            body: {
                // 主体配置
                sheetConfig: {
                    // 工作表菜单配置
                    showMenu: true, // 是否显示右击菜单
                },
                banner: true, // 移除水印
                sheets: [
                    // 工作表主体配置
                    {
                        name: '导入模板', // 工作表名称
                        tableConfig: {
                            // 表格配置
                            data: [
                                // 初始化表数据
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '编号', color: 'rgb(51, 204, 255)' }] },
                                    },
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '订单号*', color: 'rgb(51, 204, 255)' }] },
                                    },
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '物料号', color: 'rgb(51, 204, 255)' }] },
                                    },
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '产品名称*', color: 'rgb(51, 204, 255)' }] },
                                    },
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '送货数量*', color: 'rgb(51, 204, 255)' }] },
                                    },
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '单位', color: 'rgb(51, 204, 255)' }] },
                                    },
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '备注', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '1', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '2', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '3', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '4', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '5', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '6', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '7', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '8', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '9', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '10', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '11', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '12', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '13', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '14', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '15', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '16', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '17', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '18', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '19', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '20', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '21', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '22', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '23', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '24', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '25', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '26', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '27', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '28', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '29', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '30', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '31', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '32', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '33', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '34', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '35', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '36', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '37', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '38', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '39', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '40', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '41', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '42', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '43', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '44', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '45', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '46', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '47', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '48', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '49', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '50', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                                [
                                    {
                                        contentType: 2,
                                        fontAttr: { align: 'center', textWrap: 2, direction: 'vertical' },
                                        richText: { rich: [{ text: '51', color: 'rgb(51, 204, 255)' }] },
                                    },
                                ],
                            ],
                            index: {
                                // 标题行列配置
                                displayTopIndex: true, // 是否显示标题行
                                displayLeftIndex: true, // 是否显示标题列
                                height: 30, // 标题行高度
                                width: 50, // 标题列宽度
                                gridColor: 'rgb(193,193,193)', // 标题行列边框颜色
                                size: 12, // 标题行列字体大小
                                color: 'rgb(0,0,0)', // 标题行列字体颜色
                            },
                            table: {
                                // 表格整体配置
                                showGrid: true, // 是否显示网格线
                                background: 'rgb(255,255,255)', // 表格区域背景颜色
                                borderColor: 'rgb(0,0,0)', // 默认边框颜色
                                gridColor: 'rgb(225,225,225)', // 网格线颜色
                            },
                            rows: {
                                // 行配置
                                len: 51, // 自定义最大行数
                                height: 35, // 默认行高
                                data: [], // 行配置数据
                            },
                            cols: {
                                // 列配置
                                len: 7, // 自定义最大列数
                                width: 110, // 默认列宽
                                data: [
                                    // 行配置数据
                                    { col: 0, width: 100 },
                                    { col: 1, width: 250 },
                                    { col: 2, width: 250 },
                                    { col: 3, width: 300 },
                                    { col: 4, width: 200 },
                                    { col: 5, width: 250 },
                                    { col: 6, width: 370 },
                                ],
                            },
                            xFixedView: {
                                // 冻结范围
                                fxLeft: -1, // 冻结列索引，-1为不冻结
                                fxTop: -1, // 冻结行索引，-1为不冻结
                            },
                            xFixedBar: {
                                // 冻结分割线样式
                                height: 16, // 冻结行分割线高度
                                width: 26, // 冻结列分割线宽度
                                background: 'rgb(234,234,234)', // 冻结分割线背景色
                                buttonColor: 'rgb(193,193,193)', // 冻结分割线按钮背景色
                            },
                            protection: {
                                protections: [], // 保护配置
                            },
                            sheetProtection: false, // 是否保护--影响缩放
                        },
                    },
                ],
                tabConfig: {
                    // 工作表选项卡配置
                    showMenu: true, // 是否显示选项卡右击菜单
                },
            },
            bottom: {
                // 底部状态栏配置
                show: true, // 是否显示状态栏
            },
        },
    };

    xSheet = new window.XSheet('#onlineTable', settings);

    const tips = document.querySelector('.x-sheet-version-tips') as HTMLElement;
    tips.style.display = 'none';
};
// 需要导出的数据
const orderData = reactive<AjaxResponse['outBoundList'][0]['orderData']>([]);
// xSheet处理数据事件 -- 生成orderData
const processDataEvent = () => {
    // 清空数据
    orderData.length = 0;
    // 获取表格数据
    const tableData = xSheet.getWork().getBody().getSheets()[0].options.tableConfig.data;
    // 第一行数据表头，直接跳过
    for (let i = 1; i < tableData.length; i++) {
        const table = tableData[i];
        // 准备数据对象
        let obj: any = {};
        // 第一个表格是标号，直接跳过，验证其他字段是否为空
        for (let j = 1; j < table.length; j++) {
            const cell = table[j];

            // 订单号
            if (j == 1) {
                // 验证单元格是否为空
                if (cell === undefined) {
                    break;
                }
                // 订单号为空的时候，则跳过
                if (cell.text === '') {
                    ElMessage.warning(`第${i}行，第${j}格子，订单号不能为空,或者本身就位空白行`);
                    break;
                }
                obj.orderNo = cell.text;
            }

            // 物料号
            if (j == 2) {
                if (cell === undefined) {
                    obj.materialNumber = '';
                } else {
                    obj.materialNumber = cell.text;
                }
            }

            // 产品名称
            if (j == 3) {
                // 验证单元格是否为空
                if (cell === undefined) {
                    ElMessage.warning(`第${i}行，第${j}格子，产品名称不能为空`);
                    break;
                }
                // 产品名称为空的时候，则跳过
                if (cell.text === '') {
                    ElMessage.warning(`第${i}行，第${j}格子，产品名称不能为空`);
                    break;
                }
                obj.productName = cell.text;
            }

            // 送货数量
            if (j == 4) {
                // 送货数量为空的时候，则跳过
                // 验证单元格是否为空
                if (cell === undefined) {
                    ElMessage.warning(`第${i}行，第${j}格子，送货数量不能为空`);
                    break;
                }
                if (cell.text === '') {
                    ElMessage.warning(`第${i}行，第${j}格子，送货数量不能为空`);
                    break;
                }
                obj.deliveryQuantity = Number(cell.text);
            }

            // 单位
            if (j == 5) {
                if (cell === undefined) {
                    obj.unit = '只';
                } else {
                    obj.unit = cell.text;
                }
            }

            // 备注
            if (j == 6) {
                if (cell === undefined) {
                    obj.remark = '';
                } else {
                    obj.remark = cell.text;
                }
            }
        }
        // 添加到数组中
        orderData.push(obj);
    }
    // 去空
    for (let index = 0; index < orderData.length; index++) {
        const order = orderData[index];
        // 如果为空，直接删除
        if (Object.keys(order).length == 0) {
            orderData.splice(index, 1);
            index--;
        }
        // 添加订单id
        order['orderId'] = '';
        // 添加产品物料号
        order['materialNumber'] = '';
        // 添加产品id
        order['productId'] = '';
        // 添加产品尺寸
        order['productSize'] = '';
        // 添加订单数量
        order['orderNumber'] = 0;
        // 添加价格
        order['price'] = 0;
        // 添加小计
        order['subtotal'] = 0;
        // 添加导入是否正确的标识
        order['check'] = '×';
    }

    if (orderData.length == 0) {
        ElMessage.warning('未检测到数据');
    } else {
        importConfirmVisible.value = true;
    }
};

/* ******************************检查订单交付属性/方法****************************** */
// 显示导入确认弹窗
const importConfirmVisible = ref(false);
// 检查订单交付是否正确  -- 校验orderData
const checkOrderDelivery = (item: AjaxResponse['outBoundList'][0]['orderData'][0]): { message: string; type: any } => {
    // 匹配标识
    let flag = false;
    let message = '';
    let type = '';

    // 遍历所有订单
    for (let index = 0; index < props.allDeliveredList.length; index++) {
        const allDeliveredList = props.allDeliveredList[index];

        // 订单号与订单项目中某个产品名称相同，则匹配。
        if (allDeliveredList.orderNo == item.orderNo && allDeliveredList.orderDetail.some((detail) => detail.productName == item.productName)) {
            // 匹配标识
            flag = true;
            // 定位到订单中的位置
            const detail = allDeliveredList.orderDetail.find((detail) => detail.productName == item.productName);
            // 本次送货 + 以往送货数量 > 订单数量 ，则出错。
            if (item.deliveryQuantity + detail!.deliveryQuantity > detail!.orderNumber) {
                item.check = '所有送货记录之和大于订单数量';
                type = 'warning';
                message = '所有送货记录之和大于订单数量';
            } else {
                item.orderId = allDeliveredList._id;
                item.materialNumber = detail!.materialNumber;
                item.productId = detail!.productId;
                item.productSize = detail!.productSize;
                item.orderNumber = detail!.orderNumber;
                item.price = Number((detail!.subtotal / detail!.orderNumber).toFixed(2));
                item.subtotal = Number((item.price * item.deliveryQuantity).toFixed(2));
                item.check = '√';
                type = 'success';
                message = '√';
            }
        }
    }

    // 遍历没有匹配项
    if (!flag) {
        message = '无此订单号/订单中无此产品';
        type = 'danger';
    }

    return { message, type };
};
// 提交到出库
const confirmImport = () => {
    const index = orderData.findIndex((i) => i.check == '×');
    if (index !== -1) {
        ElMessage.warning('请检查订单交付表单是否正确');
    } else {
        // 提交到出库的数据
        const data: AjaxRequest['orderData'] = [];
        orderData.forEach((item) => {
            data.push({
                orderId: item.orderId,
                orderNo: item.orderNo,
                materialNumber: item.materialNumber,
                productId: item.productId,
                productName: item.productName,
                productSize: item.productSize,
                orderNumber: item.orderNumber,
                deliveryQuantity: item.deliveryQuantity,
                unit: item.unit,
                price: item.price,
                subtotal: item.subtotal,
                remark: item.remark,
            });
        });
        // 创建出库
        createOutBound('import', props.customerId, data).then((res) => {
            ElMessage.success(res.message);
            importConfirmVisible.value = false;
            onlineTableVisible.value = false;
        });
    }
};
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.online-table-container {
    height: calc(100vh - 80px);
    width: calc(100vw - 32px);
}
</style>
